<template>
  <div>
    <nav-bar></nav-bar>
    <!-- 轮播 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in gallery" :key="item.id"
          ><img :src="item.img_url" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="swiper-b">
      <div class="item">30天无忧退货</div>
      <div class="item">48小时快速退款</div>
      <div class="item">满88元免邮费</div>
    </div>
    <div class="goods-info">
      <p class="name">{{ info.name }}</p>
      <p class="desc">{{ info.goods_brief }}</p>
      <p class="price">￥{{ info.retail_price }}</p>
    </div>
    <!-- 商品规格详情 -->
    <div class="attribute" v-if="num != 0">
      <div class="title">商品参数</div>
      <div class="item" v-for="item in attribute" :key="item.id">
        <div>{{ item.name }}</div>
        <div>{{ item.value }}</div>
      </div>
    </div>
    <!-- 详情图 -->
    <div class="desc" v-html="goods_desc"></div>
    <!-- 问题 -->
    <div class="problem">
      <div class="top">
        <div class="line"></div>
        <div class="title">常见问题</div>
        <div class="line"></div>
      </div>
      <div class="content">
        <div class="item" v-for="item in issue" :key="item.id">
          <div class="question">
            <div class="dot"></div>
            <div class="questions">{{ item.question }}</div>
          </div>
          <div class="answer">{{ item.answer }}</div>
        </div>
      </div>
    </div>
    <!-- 大家都在看 -->
    <div class="everyOne">
      <div class="top">
        <div class="line"></div>
        <div class="title">大家都在看</div>
        <div class="line"></div>
      </div>
      <div class="sublist">
        <div class="item" v-for="item in productList" :key="item.id" @click="goGoods(item.id)">
          <img :src="item.list_pic_url" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="price">￥{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon
        icon="star-o"
        @click="change(info.id)"
        :color="shows"
      />
      <van-goods-action-icon icon="cart-o" :badge="allnumber" @click="goCart" />
      <van-goods-action-button text="立即购买" @click="Addcars" />
      <van-goods-action-button
        type="danger"
        text="加入购物车"
        @click="Addcars"
      />
    </van-goods-action>
    <van-popup v-model="show" position="bottom" :style="{ height: '45%' }">
      <div class="commodity">
        <div class="commodity-left">
          <img :src="info.primary_pic_url" alt="" />
        </div>
        <div class="commodity-right">
          <div class="right-price">价格￥{{ info.retail_price }}</div>
          <p>请选择数量</p>
        </div>
        <div class="close" @click="close">X</div>
      </div>
      <div class="goods-num">
        <p class="goods-nums">数量</p>
        <div class="nums">
          <van-stepper v-model="value" min="1" :max="info.retail_price" />
        </div>
      </div>
      <van-goods-action>
        <van-goods-action-icon
          icon="star-o"
          @click="change(goodsid)"
          :color="shows"
        />
        <van-goods-action-icon
          icon="cart-o"
          @click="goCart"
          :badge="allnumber"
        />
        <van-goods-action-button text="立即购买" @click="Addcar" />
        <van-goods-action-button
          type="danger"
          text="加入购物车"
          @click="Addcar"
        />
      </van-goods-action>
    </van-popup>
  </div>
</template>

<script>
import { detailaction } from "@/api/goods";
import { addCart } from "@/api/cart/index.js";
import { cartList } from "@/api/cart/cartList.js";

import Navbar from "../../../components/Navbar";
import { Toast } from "vant";
import { addcollection } from "@/api/my/collection/addcollec.js";

export default {
  props: {},
  data() {
    return {
      gallery: [],
      show: false,
      info: [],
      issue: [],
      productList: [],
      attribute: [],
      num: "",
      goods_desc: [],
      shows: "",
      flag: false,
      value: "",
      goodsid: "",
      goodList: [],
      allnumber: "",
      id:''
    };
  },
  computed: {},
  created() {
      this.id = this.$route.query.ids;
    this.init();
  },
  mounted() {},
  watch: {},
  methods: {
    init() {
    
      detailaction({
        id:this.id,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.gallery = res.gallery; //轮播
        this.info = res.info;
        this.goodsid = res.info.id;
        this.issue = res.issue;
        this.productList = res.productList;
        this.attribute = res.attribute;
        this.num = this.attribute.length;
        this.goods_desc = res.info.goods_desc;
        this.allnumber = res.allnumber;
      });
    },
    change(id) {
      this.flag = !this.flag;
      if (this.flag) {
        this.shows = "#FF5000";
        addcollection({
          openId: localStorage.getItem("openId"),
          goodsId: id,
        }).then((res) => {
          console.log(res);
          Toast.success("收藏成功");
        });
      } else {
        this.shows = "";
        Toast.fail("取消收藏");
      }
    },
    Addcars() {
      this.show = !this.show;
    },
    Addcar() {
      this.show = !this.show;
      addCart({
        goodsId: this.goodsid,
        number: this.value,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        Toast.success("添加成功");
        this.init();
      });
      this.value = 1;
    },
    close() {
      this.show = !this.show;
    },
    goCart() {
      this.$router.push("/cart");
    },
    goGoods(id){
     this.id=id;
     this.init()
     document.body.scrollTop = 0;
      // firefox
      document.documentElement.scrollTop = 0;
      // safari
      window.pageYOffset = 0;
    }
  },
  components: {
    "nav-bar": Navbar,
  },
};
</script>

<style lang="scss" scoped >
.swiper {
  width: 375px;
  height: 375px;
  img {
    width: 100%;
    height: 100%;
  }
}
.swiper-b {
  width: 355px;
  height: 36px;
  margin: 0 auto;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item {
    background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png)
      0 no-repeat;
    background-size: 0.13333rem;
    padding-left: 0.2rem;
    display: flex;
    align-items: center;
    font-size: 0.33333rem;
    color: #666;
  }
}
.goods-info {
  width: 375px;
  height: 153px;
  background: #fff;
  margin: 0 auto;
  border-bottom: 1px solid #f4f4f4;
  p {
    text-align: center;
    display: block;
  }
  .name {
    font-size: 20px;
    padding: 10px;
  }
  .desc {
    margin-bottom: 12px;
    font-size: 12px;
    color: #999;
  }
  .price {
    margin-bottom: 17px;
    font-size: 16px;
    color: #b4282d;
  }
}
.problem {
  margin-top: 10px;
  margin-bottom: 55px;
  .top {
    padding: 17.5px 0;
    background: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .line {
      display: inline-block;
      height: 1px;
      width: 50px;
      background: #ccc;
    }
    .title {
      padding: 0 10px;
      background-color: #fff;
    }
  }
  .content {
    padding: 0 15px;
    background-color: #fff;
    .item {
      padding-bottom: 12px;
      .question {
        display: flex;
        .dot {
          width: 4px;
          height: 4px;
          background: #b4282d;
          border-radius: 50%;
          margin-top: 5px;
        }
        .questions {
          display: block;
          line-height: 15px;
          font-size: 13px;
          padding-left: 4px;
          padding-bottom: 8px;
          color: #303030;
        }
      }

      .answer {
        line-height: 20px;
        padding-left: 8px;
        color: #787878;
        font-size: 12px;
        text-align: left;
      }
    }
  }
}
.top {
  padding: 17.5px 0;
  background: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  .line {
    display: inline-block;
    height: 1px;
    width: 50px;
    background: #ccc;
  }
  .title {
    padding: 0 10px;
    background-color: #fff;
  }
}
.sublist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 365px;
  margin: 0 auto;
  .item {
    width: 180px;
    height: 210px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    img {
      display: block;
      width: 150px;
      height: 150px;
      margin: 0 auto;
    }
    p {
      text-indent: 1em;
      text-align: left;
    }
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 98%;
    }
    .price {
      color: #9c3232;
    }
  }
}
.attribute {
  padding: 10px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  .title {
    font-size: 20px;
    padding: 10px 0;
  }
  .item {
    display: flex;
    background: #f7f7f7;
    padding: 10px 0;
    margin: 10px;
  }
  .item div:first-child {
    width: 67px;
    font-size: 13px;
    color: #999;
  }
  .item div:nth-child(2) {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item div {
    text-align: left;
  }
}
.commodity {
  display: flex;
  margin-bottom: 17px;
  position: relative;
  .commodity-left {
    height: 88px;
    width: 88px;
    margin-right: 15px;
    img {
      float: left;
      height: 88px;
      width: 88px;
      margin-left: 20px;
    }
  }
  .commodity-right {
    margin-top: 25px;
    margin-left: 20px;
    p {
      display: block;
      width: 100%;
      line-height: 22px;
      text-align: left;
    }
    .right-price {
      color: #b4282d;
    }
  }
  .close {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 22px;
    color: #999;
  }
}
.goods-nums {
  text-align: left;
  margin-left: 20px;
}
</style>
<style >
.desc img {
  display: block;
  width: 100%;
}
.desc p{
  display: block;
  margin: 0;
}
.van-stepper {
  float: left;
  margin-left: 20px;
}
</style>
